//注册页面

<template>
    <div>
        <van-nav-bar title="编辑信息" left-arrow @click-left="onClickLeft" />
        <van-cell-group>
            <van-field v-model="info.nickname" label="昵称" placeholder="昵称" />
            <van-field v-model="info.phone" label="手机" placeholder="手机" />
            <van-field v-model="info.sgin" label="签名" placeholder="签名" />
            <van-field name="radio" label="性别">
                <template #input>
                    <van-radio-group v-model="info.sex" direction="horizontal">
                        <van-radio name="1">男</van-radio>
                        <van-radio name="2">女</van-radio>
                        <van-radio name="3">未知</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field name="uploader" label="头像上传">
                <template #input>
                    <van-uploader v-model="uploader" :max-count="1" :after-read="afterRead" />
                </template>
            </van-field>
        </van-cell-group>

        <div style="margin: 16px;">
            <van-button round block type="primary" @click="comfire">
                提交修改
            </van-button>
        </div>
    </div>
</template>

<script>
import axios from '../utils/request'
import {
    Toast
} from 'vant';
export default {
    computed: {

    },
    data() {
        return {
            info: {},//当前用户的用户信息
            uploader: [],
        }
    },
    mounted() {//刷新页面回调的生命周期函数
        //取接口的数据
        axios.get("/getUser").then(response => {


                this.info = response.data.data
                this.info.sex = this.info.sex+""
                this.uploader.push({url:this.info.avatar })//显示图片
                

        })
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        afterRead(file) {
            // 此时可以自行将文件上传至服务器
            console.log(file)
            debugger
            file = file.file //这个是图片
            let data = new FormData();
            file.status = 'uploading'
            file.message = "上传中" //用来显示UI界面的
            data.append("file", file);//要上传的文件
            data.append("type", 1)
            axios
                .post('/uploadFile', data)
                .then(response => {
                    if (response.data.code == 0) {
                        file.status = 'done'//上传成功，改成done，就不会转圈圈了
                        // file.url = response.data.data
                        this.info.avatar = response.data.data
                    } else {
                        file.status = 'failed'
                        file.message = "失败"
                    }
                })
        },
        comfire() {
            Toast.loading({
                message: '登录中...'
            });

            axios.post("/updateUserInfo", this.info).then(response => {

                        Toast.success(response.data.msg);
                        this.$router.back()

                })
        }

    }
}
</script>

<style>
.captcha-container {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.captcha-loading {
    font-size: 12px;
    color: #999;
}
</style>